<template>
<van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad" :immediate-check="false">
    <comment-item v-for="(item,index) in comments" :key="index" :comment="item" @reply-click="$emit('reply-click',$event)"></comment-item>
</van-list>
</template>

<script>
import { getComments } from '@/api/comment'
import CommentItem from './comment-item'
export default {
  name: 'CommentList',
  components: {
    CommentItem
  },
  created () {
    // 列表组件到底的时候或者第一次到可视区的时候，它会主动调用onLoad，它内部会把loading变成false
    // 但是现在这个this.onLoad是我们自己在主动的调用
    this.loading = true
    this.onLoad()
  },
  //   来自父组件中的数据
  props: {
    source: {
      type: [Number, String, Object],
      required: true
    },
    comments: {
      type: Array,
      //   default: function () {
      //     return []
      //   }
      default: () => []
    },
    type: {
      default: 'a', // 默认是对文章的评论
      validator: function (value) {
        // ['a','c'].some(item=>item===value)
        return ['a', 'c'].includes(value)
      }
    }
  },
  //   私有数据
  data () {
    return {
      list: [],
      loading: false,
      finished: false,
      offset: null // 获取评论数据的偏移量，值为评论id，表示从此id的数据向后取，不传表示从第一页开始读取数据
    //   comments: []
    }
  },
  methods: {
    async onLoad () {
      try {
        const { data: res } = await getComments({
          type: this.type, // 评论类型，a-对文章(article)的评论，c-对评论(comment)的回复
          source: this.source.toString(), // 源id，文章id或评论id
          offset: this.offset,
          limit: 10
        })
        // this.comments = res.data.results
        this.comments.push(...res.data.results)// 不是覆盖，而是追加
        console.log(res.data)
        this.$emit('comments-event', res.data)
        this.loading = false// 结束加载中效果
        console.log(this.comments)
        // 数据全部加载完成
        if (res.data.results.length === 0) {
          this.finished = true
        }
        this.offset = res.data.last_id
      } catch (err) {
        console.log(err)
      }
    }
  }
}
</script>

<style scoped lang="less">

</style>
